<template>
  <swiper
    class="swiper"
    direction="vertical"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide class="slide">
      <rookie></rookie>
    </swiper-slide>
    <swiper-slide class="slide">
      <gbei></gbei>
    </swiper-slide>
  </swiper>
</template>
<script>
import 'swiper/css'
import { Swiper, SwiperSlide } from 'swiper/vue'
import Rookie from '@/views/rookie/Index.vue'
import Gbei from '@/views/gbei/Index.vue'

export default {
  components: {
    Swiper,
    SwiperSlide,
    Rookie,
    Gbei
  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper)
    }
    const onSlideChange = () => {
      console.log('slide change')
    }
    return {
      onSwiper,
      onSlideChange
    }
  }
}
</script>

<style lang="scss">
.swiper {
  width: 100%;
  height: 100vh;

  .slide {
    width: 100%;
    height: 100%;
  }
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotate(0deg);
  }

  100% {
    transform: rotateX(2turn) rotateY(1turn) rotate(1turn);
  }
}
</style>
